<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width:200px;
            height:800px;
            border:1px solid black;
        }

        .menus .header{
            background-color: green;
            padding:10px 5px;
            border-bottom:1px solid black;
            cursor:pointer;
        }

        .menus .content a{
            display:block;
            padding:5px 5px;
            text-decoration: none;
            border-bottom: 1px dotted black;
        }

        .hide{
            display:none;
        }


    </style>
</head>
<body>
    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickme(this);">购票</div>
            <div class="content hide" >
                <a>地点</a>
                <a>车次</a>
                <a>时间</a>
                <a>票价</a>
                <a>余票</a>
            </div>
        </div>

        <div class="item">
            <div class="header" onclick="clickme(this);">住宿</div>
            <div class="content hide">
                <a>地点</a>
                <a>酒店</a>
                <a>时间</a>
                <a>价格</a>
                <a>房间</a>
                <a>床位</a>
            </div>
        </div>

     <div class="item">
            <div class="header" onclick="clickme(this);">旅游</div>
            <div class="content hide">
                <a>北京</a>
                <a>上海</a>
                <a>广州</a>
                <a>深圳</a>
                <a>成都</a>
                <a>重庆</a>
                <a>武汉</a>
                <a>天津</a>
            </div>
     </div>

     <div class="item">
            <div class="header" onclick="clickme(this);">小吃</div>
            <div class="content hide">
                <a>宫保鸡丁</a>
                <a>麻婆豆腐</a>
                <a>水煮鱼</a>
                <a>烧烤</a>
                <a>烤鸭</a>
                <a>烤鱼</a>
                <a>烤肉</a>
            </div>
     </div>

<script src="static/jquery-3.7.1.js"></script>
<script type="text/javascript">
    function clickme(self) {

<!--    var hasHide = $(self).next().hasClass("hide");-->
<!--    if(hasHide){-->
<!--        $(self).next().removeClass("hide");-->
<!--    }else{-->
<!--        $(self).next().addClass("hide");-->
<!--    } -->

    $(self).next().removeClass("hide");
    $(self).parent().siblings().find(".content").addClass("hide");
}

</script>
</body>
</html>
